<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        -->
    <!--CSS bổ sung-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- Optional: Include the jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false&language=vi"></script>
<script type="text/javascript">
var map;
function initialize() {
      var myLatlng = new google.maps.LatLng(10.843928,106.717672);
      var myOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("div_id"), myOptions); 
  // Biến text chứa nội dung sẽ được hiển thị
var text;
text= "<b style='color:#00F' " + 
         "style='text-align:center'>Nhà của mình nè!<br />" + 
     "<img src='citihouse-logo.jpg'  /></b>";
   var infowindow = new google.maps.InfoWindow(
    { content: text,
        size: new google.maps.Size(100,50),
        position: myLatlng
    });
       infowindow.open(map);    
    var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Trường ĐH GTVT TP.HCM!"
  });
}
</script>
        </head>

<body onLoad="initialize()">
    <nav class="navbar navbar-static">
        <div class="container">
            <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
            <div class="nav-collapse collase">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Quận 1</a>
                    </li>
                    <li><a href="#">Quận 3</a>
                    </li>
                    <li><a href="#">Quận 5</a>
                    </li>
                    <li><a href="#">Quận 10</a>
                    </li>
                </ul>
                <ul class="nav navbar-right navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
                        <ul class="dropdown-menu" style="padding:12px;">
                            <form class="form-inline">
                                <button type="submit" class="btn btn-default pull-right"><i class="glyphicon glyphicon-search"></i>
                                </button>
                                <input type="text" class="form-control pull-left" placeholder="Search">
                            </form>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Login</a>
                            </li>
                            <li><a href="#">Profile</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">About</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- /.navbar -->
    <div class="row">
        <div class="col-md-8">
            <div id="div_id" style="width:100%;height:100%;"></div>
            <!-- <img src="img/map.png" alt="map"> -->
        </div>
        <div class="col-md-4">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">Profile</a>
                </li>
                <li><a href="#">Messages</a>
                </li>
            </ul>
            <!-- <img src="img/sidebar.png" alt="listpoint"> -->
        </div>
    </div>
</body>

</html>